{% extends "base.html" %}

{% block content %}
<script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.min.js"></script>
<script type="text/javascript" src="/static/js/artDialog/jquery.artDialog.js?skin=default"></script>
<script type="text/javascript" src="/static/js/artDialog/plugins/iframeTools.js"></script>
<form action='' method='post' name="sendmail">
{{ttt}}
<table aligh="center" width="100%" class="aui-ibox-data aui-dotted-split">
	<tr>
		<td></td>
		<td colspan="5" align="left"><h1>Send Mail</h1></td>
	</tr>
	<tr>
		<td width="100px" align="right">mail to:</td>
		<td >&nbsp;
			<input type='text' class="text" name='sendto' readonly id="sendto" value="Select Mail List" size="40">
			<input type='hidden' name='gmid' id="gmid" value="">
			&nbsp;[<a href="javascript:void(0)" id='select_mail'>Select Mail List</a>]
			&nbsp;&nbsp;[<a href="javascript:void(0)" id='import_mail'>Import CSV</a>]
			&nbsp;&nbsp;[<a href="javascript:void(0)" id='del_mail'>Clears The Selection</a>]
		</td>
	</tr>
	<tr>
		<td width="100px" align="right">From Mail:</td>
		<td colspan="5" align="left">&nbsp;
			Group:<select name="sendgroup">
			{%for g in groups%}
				<option value='{{g.0}}'>Group {{g.0}}</option>
			{%endfor%}
			</select>
			<!--<span style="color:gray;">The sender group</span>-->
			Delay:<input type='text' name='delay' value='100' size='1'>ms
			&nbsp;&nbsp;&nbsp;<a href="/watch_from_email_details/" id="watch_from_email">details</a>
		</td>
	</tr>
	<tr>
		<td width="100px" align="right">mail subject:</td>
		<td >&nbsp;
			<input type='text' name='object' class="text" id="object" size="40">
		</td>
	</tr>
	<tr>
		<td width="100px" align="right" valign="center">content：</td>
		<td colspan='10'>
			<div id="edit_content">
				<INPUT id=content style="DISPLAY: none" type=hidden name="modcontent" value="">
				<INPUT id=content___Config style="display: none" type=hidden> 
				<IFRAME id=content___Frame src="/medias/ckeditor/static/editor/editor/fckeditor.html?InstanceName=modcontent&Toolbar=Default" frameBorder=0 width=1000 scrolling=no height=500> 
				</IFRAME>
			</div>
			<div id="letter_con" style="display:none;"></div>
		</td>
	</tr>
	<tr>
		<td></td>
		<td>
			<input class="g-button g-button-submit" type='button' name='sendMail' value='发送'/>
			<!--<input class="g-button g-button-submit look_con" type='button' name='watch' value='预览'/>-->
		</td>
	</tr>
</table>
</form>
<div id="dialog"></div>
<div id="uploadcsv" style="display:none;">
<iframe name='uploadtarget' style='display:none;'></iframe>
<form method='post' action='/uploadfile/'  enctype="MULTIPART/FORM-DATA" target='uploadtarget' name='form1'>
	Select File:<input type='file' name='csvfile'/>
	<input type='submit' name='uploadfile' value="Upload"/>
</form>
	<li style="color:#999;">Notice:File format must 'csv'</li>
	<p class='red optinfo'></p>
	<script>
		$("input[name='uploadfile']").click(function(){
			var file = $('input[type="file"]').val()
			if(!file){
				art.dialog.alert('Please Select files!')
				return false;
			}
			if(file.slice(-3)!='csv'){
				art.dialog.alert('File Format must csv !')
				return false;
			}
			$(this).parents('form[name="form1"]').submit()
			$(this).attr('disabled',true)
			$(this).val('Upload....')
			$('.optinfo').html('<img src="/static/images/loader.gif">')
			return false;
		})
	</script>
</div>
<style>
.failEmail{
	float:left;
	padding:3px;
	margin:2px;
	border:1px solid #def;
}
.failEmail:hover{
		background:#efefef;
		cursor:pointer;
	}
</style>
<script>
	$('a#select_mail').click(
		function (){
			selectUser();
		}
	)
	$('a#del_mail').click(function(){
		$("input[name='sendto']").val('Select Mail List')
		$('input#gmid').val('')
		art.dialog.data('mailgroupid',$('#gmid').val())
		art('#del_mail').dialog({content:'Clear Success!',ok:true})
	})
	$('a#import_mail').click(function(){
		var con = $('#uploadcsv').html()
		$('.optinfo').empty()
		art.dialog({content:con,title:'Import CSV'})
		//art.dialog.open('http://localhost/phpmail/ajaxmail/uploadEmail.php')
	})
	$("input[name='sendto']").focus(function(){
		if($(this).val() == 'Select Mail List'){
			selectUser();
		}
	})
	function selectUser(){
		art.dialog.data('mailgroupid',$('#gmid').val())
		art.dialog.open('/smaillist', {title: 'Mail List',width:'80%',height:470});
	}
	$('a#watch_from_email').click(function(){
		var url = $(this).attr('href')
		art.dialog.open(url+'?group='+$('select[name="sendgroup"]').val(),{'title':'Watch From Details',lock:true,width:700})
		return false;
	})
	$('input[name="sendMail"]').click(function(){
		var groupid = $('input#gmid').val()
		var sendgroup = $('select[name="sendgroup"]').val()
		var delay = $('input[name="delay"]').val()
		var obj = $('input#object').val()
		var mail = FCKeditorAPI.GetInstance('modcontent')
		var mailcon = mail.EditorDocument.body.innerHTML

		if(!groupid){
			art.dialog.alert("Mail receiving people can't be empty!");
			return false;
		}
		if(!obj){
			art.dialog.alert("The mail subject can't for empty!");
			return false;
		}
		if(!groupid){
			art.dialog.alert("The mail content can't for empty!");
			return false;
		}

		var url = '/sendphpmail/'
		var data = {'groupid':groupid,'sendgroup':sendgroup,'delay':delay,'obj':obj,'content':mailcon}

		var dialog = art.dialog({id: 'N3690',title:'Sending ...',lock:true,width:810});

		$.ajax({
			url:url,
			data:data,
			type:'post',
			success:(function(e,code){
				if(code == 'success'){
					//dialog.content(e);
					var user = JSON.parse(e);
					if(user['code']==1){
						dialog.title('Successful!')
						var fail = user['msg'].fail
						var html = 'Send Fail Email List: <font color="gray">Total:'+(fail.length+user['msg'].suc.length)+'</font>&nbsp;&nbsp;<font color="red">Fail:'+fail.length+'</font><hr>'
						if (fail.length<1){
							dialog.content('<br>Mailing details, please see Batch Mail Send and System Log<br>');
						}else{
							var page = 0
							var display = 'block'
							for(var i=0;i<fail.length;i++){
								if(i%28==0){page++;if(page>1)display='none'}
								html += '<div class="failEmail page_'+page+'" style="display:'+display+'" alt="'+fail[i].reason+'" title="'+fail[i].reason+'">'+fail[i].email+'</div>'
							}
							html += '<div class="pager"></div>'
							dialog.content(html);
							var active = 'active'
							for(i=1;i<=page;i++){
								if(i!=1)active=''
								$('div.pager').append('<li><a href="javascript:$(\'div.failEmail\').hide();$(\'div.page_'+i+'\').show();" class="'+active+'">'+i+'</a>')
							}
							$('div.pager li a').click(function(){
								$(this).parents('div.pager').find('a').removeClass('active')
								$(this).addClass('active')
							})
						}
						//dialog.content(user['msg']);
						dialog.button({name:'OK'})
					}else{
						dialog.title('ERROR!')
						dialog.content(user['msg']);
						dialog.button({name:'close'})
					}
				}
				
			})
		})
	})
</script>
{% endblock %}